<template>
    <view class="content">
        <h3>创建新的训练计划</h3>
        <!-- <text selectable='true'> https://www.bilibili.com/video/BV1EE411c7tk?p=1 </text> -->
        <nut-cell-group title="第一步,请选择课程">
            <nut-cell>
                <!-- 选择课程 -->
                <nut-radiogroup v-model="current_plan" @change="radioChange">
                    <nut-radio
                        v-for="item in items"
                        :key="item.value"
                        :label="item.value"
                        icon-name="checklist"
                        icon-active-name="checklist"
                    >
                        {{ item.name }}
                    </nut-radio>
                </nut-radiogroup>
            </nut-cell>
        </nut-cell-group>

        <!-- 第二步,选择月 -->
        <nut-cell-group title="第二步,请选择当前训练阶段(没练过请选第一月)">
            <nut-cell>
                <!-- 选择课程 -->
                <nut-radiogroup v-model="current_month" @change="monthChange">
                    <nut-radio
                        v-for="item in state.plan"
                        :key="item.title"
                        :label="item.title"
                        icon-name="checklist"
                        icon-active-name="checklist"
                    >
                        {{ item.title }}
                    </nut-radio>
                </nut-radiogroup>
            </nut-cell>
        </nut-cell-group>

        <!-- 第三步,选择周 -->
        <nut-cell-group title="第三步,请选择从第几周开始(没练过请选第一周)">
            <nut-cell>
                <!-- 选择课程 -->
                <nut-radiogroup v-model="current_week" @change="weekChange">
                    <nut-radio
                        v-for="item in state.month_plan"
                        :key="item.week"
                        :label="item.week"
                        icon-name="checklist"
                        icon-active-name="checklist"
                    >
                        {{ item.week }}
                    </nut-radio>
                </nut-radiogroup>
            </nut-cell>
        </nut-cell-group>

        <!-- 第四步, 选择从那天开始 -->
        <nut-cell-group title="最后一步,请选择从哪一天开始(没练过请选第一天)">
            <nut-cell>
                <!-- 选择课程 -->
                <nut-radiogroup v-model="current_day" @change="dayChange">
                    <nut-radio
                        v-for="item in state.week_plan"
                        :key="item.day"
                        :label="item.day.toString()"
                        icon-name="checklist"
                        icon-active-name="checklist"
                    >
                        周{{ item.day }}
                    </nut-radio>
                </nut-radiogroup>
            </nut-cell>
        </nut-cell-group>

        <nut-button
            block
            :disabled="button_disabled"
            type="primary"
            @click="generatePlan"
            :loading="button_loading"
            >生成计划并开始训练</nut-button
        >
    </view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import "./index.less";
import Taro from "@tarojs/taro";
import * as _ from "lodash";
import { getPlanByTitle } from "../../utils/tools";
import { TODAY_POINT_KEY } from "../../utils/constant";
export default defineComponent({
    setup() {
        console.log("TODAY_POINT_KEY ---", TODAY_POINT_KEY);

        const items = [
            {
                value: 1,
                name: "Hip Hop ABS",
            },
            // {
            //     value :2,
            //     name : 'Focus T25'
            // }
        ];

        let current_plan = ref(1);
        const state = reactive({
            plan: undefined,
            month_plan: undefined,
            week_plan: undefined,
        });

        //训练起始点
        const start_point = reactive({
            plan: "HipHopAbs",
            month: undefined,
            week: undefined,
            day: undefined,
        });

        state.plan = getPlanByTitle("HipHopAbs");

        // 选择训练计划时
        const radioChange = (value: any) => {
            // console.log("选中的值---", value);
            current_plan.value = value;
            //选中的时候震动一下
            Taro.vibrateShort();
            //读取所选课程的阶段,  并显示在下方
            // let plan
            let plan_title = "";
            switch (value) {
                case 1:
                    plan_title = "HipHopAbs";
                    break;
                case 2:
                    plan_title = "FocusT25";
                    break;
                default:
                    break;
            }
            //
            state.plan = getPlanByTitle(plan_title);
            start_point.plan = plan_title;
        };

        let current_month = ref("");
        // 月份发生改变时, 查询周的数据并渲染出来
        const monthChange = (value: any) => {
            console.log("选择月的时候---", value);
            current_month = value;
            Taro.vibrateShort();
            // 根据月计划渲染每一周
            const plan = state.plan;
            console.log("plan---", plan);

            if (plan != undefined) {
                plan.map((p) => {
                    console.log("p---", p);
                    if (value == p.title) {
                        console.log("value164--", value);
                        state.month_plan = p.plans;
                        start_point.month = value;
                    }
                });
            }
        };

        let current_week = ref("");
        // 当选择周的时候
        const weekChange = (value: any) => {
            console.log("选择周的时候---", value);
            //根据月计划和第几周, 确定周计划
            let month_plan = state.month_plan;
            if (month_plan != undefined) {
                // console.log("week_plan---", month_plan);
                month_plan.map((m) => {
                    // console.log("m---", m);
                    if (m.week == value) {
                        state.week_plan = m.plans;
                        start_point.week = value;
                    }
                });
            }
        };

        // 生成计划按钮, 默认禁用
        let button_disabled = ref(true);
        let current_day = ref("");
        const dayChange = (value: any) => {
            console.log("日期发生改变时--", value);
            start_point.day = value;
            button_disabled.value = false;
        };

        // 生成计划
        const generatePlan = () => {
            button_loading.value = true;
            // console.log("计划--", start_point);
            Taro.setStorage({
                key: TODAY_POINT_KEY,
                data: start_point,
            });
            setTimeout(() => {
                button_loading.value = false;
                Taro.reLaunch({
                    // 关闭所有页面,跳转到训练页面
                    url: "/pages/train/index",
                });
            }, 2000);
        };

        const button_loading = ref(false);
        return {
            chose_course: "选择训练课程",
            radioChange,
            current_plan,
            items,
            state,
            monthChange,
            current_month,
            weekChange,
            current_week,
            current_day,
            dayChange,
            start_point,
            button_disabled,
            generatePlan,
            button_loading,
        };
    },
});
</script>

 
